<script>
export default {
  name: "StateNotifier",
  props: {
    state: {
      type: [Number, String],
      default: ""
    },
    config: {
      type: Object,
      default: () => {
        return {}
      }
    },
    textOnly: {
      type: Boolean,
      default: false
    },
    inline:{
      type: Boolean,
      default: false
    }
  }
}
</script>

<template>
  <div :class="['state-notifier',inline?'inline':'']">
    <template v-for="(value,key) in config">
      <a
        v-if="state === key"
        :key="value['label']"
        :class="['state-color',textOnly?`text-${value['type']}`:value['type']]"
      >
        {{ value['label'] }}
      </a>
    </template>
  </div>
</template>

<style lang="scss" scoped>

.state-notifier {
  display: flex;

  &.inline{
    display: inline-block !important;
    position: relative;
    top: 4px;
    .state-color{
      font-size: 0.875rem !important;
      padding: 0 !important;

    }
  }

  .state-color {
    font-size: 12px;
    padding: 1px 8px;
    overflow: hidden;
    display: inline-block;
    border-radius: 5px;
    &.text{

    }

  }

}
</style>
